<template>
  <div class="paddingTop search_page">
    <head-top head-title="写动态" goBack="true"></head-top>
    <div>
      
      <input
        type="hidden"
        v-model="dynamic.createPerson"
        style="width: 16rem;height:1.5rem; font-size: 0.8rem;margin-top:0.5rem"
      />
      <span>标题</span>
      <input
        type="text"
        v-model="dynamic.title"
        style="width: 16rem;height:1.5rem; font-size: 0.8rem;margin-top:0.5rem"
      />
      <span>内容</span>
      <textarea v-model="dynamic.content"></textarea>
      <span>添加图片</span>
      <div style="margin-top:0.5rem;margin-left:3rem">
        <el-upload
          action="http://localhost:8081/house/oss/file/uploadImage"
          list-type="picture-card"
          :on-success="handleHotelPicSuccess"
          
          :on-remove="handleRemove"
        >
        <!-- :on-preview="handlePictureCardPreview" -->
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dynamic.image" alt />
        </el-dialog>
      </div>
      <!-- <div>
        <img
          :src="image"
          style="width:8rem;height:8rem;margin-left:4.5rem;margin-top:-1rem"
          class="file1"
          @click="upload($event)"
        />
        <input type="file" id="file1" @change="uploadshow($event)" style="display:none" />
        
      </div>-->
    </div>
    <button class="submit" @click="postDynamic()">发表</button>
  </div>
</template>

<script>
import headTop from "../../components/header/head";
import footGuide from "../../components/footer/footGuide";
import { searchRestaurant } from "../../service/getData";
import { imgBaseUrl } from "../../config/env";
import { getStore, setStore } from "../../config/mUtils";
export default {
  data() {
    return {  
      dialogVisible: false,
      id:sessionStorage.getItem("userId"),
      dynamic: {
        createPerson:"",
        title: "",
        content: "",
        images: "",
      },
    };
  },
  created(id){
    var vm=this;
    console.log(vm.id)
    this.axios({
      method:"get",
      url:"http://172.16.9.12:8081/getUserById",
     params:{
       userId:this.id

     },
       
    }).then(function(res){
        console.log(res.data);
        vm.dynamic.createPerson=res.data
    });
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // handlePictureCardPreview(file) {
    //   this.fileUrl = file.url;
    //   this.dialogVisible = true;
    // },
    handleHotelPicSuccess(res,file){
       this.dynamic.image=res.data.fileUrl;
       console.log(this.dynamic.image=res.data.fileUrl);
        // 强制重新渲染
        this.$forceUpdate()
      },
    

    postDynamic() {
      var v=this;
      var vm = this.axios({
        method: "post",
        params: {
          createPerson:this.dynamic.createPerson,
          title: this.dynamic.title,
          content: this.dynamic.content,
          images: this.dynamic.image
        },
        url: "http://172.16.9.12:8081/house/dynamic/addDynamic",
      }).then(function (res) {
      v.$router.go(-1);
      });
    },
    upload(e) {
      document.getElementById("file1").click();
      var file = input[0].files[0];
      console.log(file);
      // if(!file){
      //   alert("请选择图片");
      // }else{
      //   var newImg=window.URL.createObjectURL(file);
      //   this.image=newImg
      // }
    },
    uploadshow(event) {},
  },

  components: {
    headTop,
    footGuide,
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.search_page {
  margin-bottom: 2rem;
}
span {
  font-size: 0.8rem;
  height: 1.5rem;
  margin-left: 0.5rem;
}
textarea {
  font-size: 0.8rem;
  width: 16rem;
  height: 7rem;
  margin-top: 0.5rem;
}

.submit {
  float: right;
  width: 3rem;
  height: 1.4rem;
  border-radius: 0.2rem;
  background-color: lawngreen;
  color: white;
  font-size: 0.9rem;
}
.submit:active {
  background-color: yellowgreen;
}
</style>